<template>
  <div :style="style">
    <el-row>
      <el-tooltip v-if="search" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button circle icon="el-icon-search" @click="handleToggleSearch()"></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="刷新" placement="top">
        <el-button circle icon="el-icon-refresh" @click="handleRefresh()"></el-button>
      </el-tooltip>
      <el-popover placement="bottom" title="显隐列" :width="600" trigger="click" :hide-after="0">
        <template #reference>
          <el-button circle icon="el-icon-menu"></el-button>
        </template>
        <el-transfer :titles="['显示', '隐藏']" v-model="hideList" :data="columns"
                     :props="{ key: 'prop' }" @change="dataChange"></el-transfer>
      </el-popover>
      <el-popover v-if="setting" placement="bottom" title="表格设置" :width="300" trigger="click" :hide-after="0">
        <template #reference>
          <el-button circle icon="el-icon-setting"></el-button>
        </template>
        <el-form label-width="80px" label-position="left">
          <el-form-item label="表格尺寸">
            <el-radio-group v-model="props.config.size" size="small">
              <el-radio-button label="large">大</el-radio-button>
              <el-radio-button label="default">正常</el-radio-button>
              <el-radio-button label="small">小</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="样式">
            <el-checkbox v-model="props.config.border" label="纵向边框"></el-checkbox>
            <el-checkbox v-model="props.config.stripe" label="斑马纹"></el-checkbox>
          </el-form-item>
        </el-form>
      </el-popover>
    </el-row>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";

const emit = defineEmits(['update:showSearch', 'queryTable']);
const props = defineProps({
  search: {type: Boolean, default: true},
  setting: {type: Boolean, default: true},
  showSearch: {type: Boolean, default: true},
  columnList: {type: Array, default: () => []},
  gutter: {type: Number, default: 10},
  config: {
    type: Object, default: () => ({
      size: "default",
      border: true,
      stripe: true
    })
  }
});

// 显隐数据
const hideList = ref([]);
const columns = computed(() => {
  return props.columnList.filter(column => column.prop && column.prop !== 'operation');
});
const style = computed(() => {
  return props.gutter ? {marginRight: `${props.gutter / 2}px`} : {};
});

// 初始化时处理显隐列
onMounted(() => {
  hideList.value = columns.value.filter(column => column.hide).map(column => column.prop);
});

// 搜索
const handleToggleSearch = () => {
  emit("update:showSearch", !props.showSearch);
};

// 刷新
const handleRefresh = () => {
  emit("queryTable");
};

// 右侧列表元素变化
const dataChange = (data) => {
  columns.value.forEach(column => {
    column.hide = data.includes(column.prop);
  });
};
</script>

<style scoped>
.el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0;
}

.el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>
